<template>
	<view class="my-header" :style="{
					position: sticky ? 'sticky' : 'static',
					top: 0,
					backgroundImage: scrollTop < 5 ? 'url(../../static/images/home/bg1.webp)': ''
				}">
		<view class="top">
			<view class="left">
				<image src="../../static/images/home/fz.png" mode="heightFix"></image>
			</view>
			<view class="right">
				<text>我的</text>
			</view>
		</view>
		<view class="search" :style="{ border:  scrollTop < 5 ? 'none': '2px solid yellow' }">
			<swiper vertical class="swiper" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">泰国前哼1</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">泰国前哼2</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">泰国前哼3</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">泰国前哼4</view>
				</swiper-item>
			</swiper>
			<text>搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-header",
		data() {
			return {

			};
		},
		props: {
			sticky: {
				type: Boolean,
				default: false
			},
			scrollTop: {
				type: Number,
				default: 0
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my-header {
		background-color: white;
		background-size: 100% 100%;
		height: 200upx;
		padding: 20upx;
		z-index: 999;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				image {
					height: 50upx;
				}
			}

			.right {}
		}

		.search {
			height: 80upx;
			background-color: white;
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 0 20upx;
			border-radius: 40upx;
			border: 4upx solid yellow;

			.swiper {
				height: 50%;
				flex: 1;
			}

			text {
				background-color: yellow;
				border-radius: 20upx;
				height: 80%;
				width: 140upx;
				align-items: center;
				display: flex;
				justify-content: center;
				font-weight: bold;
			}
		}
	}
</style>